<template>
    <div id="borrowerDetails">
        <h3>U车贷借款详情</h3>
        <table class="borrower-details">
            <tr>
                <td colspan="1"><span>订单编号：</span></td>
                <td colspan="2" align="center"><span>{{this.$route.query.loanNo}}</span></td>
                <td colspan="1"><span>订单状态：</span></td>
                <td colspan="2" align="center"><span>{{tableDataTwo.checkStatus}}</span></td>
                <td colspan="1"><span>业务员：</span></td>
                <td colspan="2" align="center"><span>{{tableDataTwo.salesman}}</span></td>
            </tr>
            <!--借款人资料-->
            <tr>
                <td colspan="9" align="center" class="table-title">借款人资料</td>
            </tr>

            <tr>
                <td colspan="1"><span>{{tableData[0].cnName}}：</span></td>
                <td colspan="2"><span>{{tableData[0].fieldValue}}</span></td>
                <td colspan="1"><span>{{tableData[1].cnName}}：</span></td>
                <td colspan="2"><span>{{tableData[1].fieldValue}}</span></td>
                <td colspan="1"><span>{{tableData[2].cnName}}：</span></td>
                <td colspan="2"><span>{{tableData[2].fieldValue}}</span></td>
            </tr>

            <tr>
                <td colspan="1"><span>{{tableData[3].cnName}}：</span></td>
                <td colspan="2"><span>{{tableData[3].fieldValue}}</span></td>
                <td colspan="1"><span>{{tableData[4].cnName}}：</span></td>
                <td colspan="5"><span>{{tableData[4].fieldValue}}</span></td>
            </tr>

            <tr>
                <td colspan="1"><span>{{tableData[5].cnName}}：</span></td>
                <td colspan="2"><span>{{tableData[5].fieldValue}}</span></td>
                <td colspan="1"><span>{{tableData[6].cnName}}：</span></td>
                <td colspan="2"><span>{{tableData[6].fieldValue}}</span></td>
                <td colspan="1"><span>{{tableData[7].cnName}}：</span></td>
                <td colspan="2"><span>{{tableData[7].fieldValue}}</span></td>
            </tr>

            <tr>
                <td colspan="1"><span>{{tableData[8].cnName}}：</span></td>
                <td colspan="3"><span>{{tableData[8].fieldValue}}</span></td>
                <td colspan="1"><span>{{tableData[9].cnName}}：</span></td>
                <td colspan="4"><span>{{tableData[9].fieldValue}}</span></td>
            </tr>

            <tr>
                <td colspan="1"><span>{{tableData[10].cnName}}：</span></td>
                <td colspan="3"><span>{{tableData[10].fieldValue}}{{tableData[11].fieldValue}}</span></td>
                <td colspan="1"><span>{{tableData[12].cnName}}：</span></td>
                <td colspan="4"><span>{{tableData[12].fieldValue}}</span></td>
            </tr>

            <!--车辆信息-->
            <tr>
                <td colspan="9" align="center" class="table-title">车辆信息</td>
            </tr>

            <tr>
                <td colspan="1"><span>{{tableData[13].cnName}}：</span></td>
                <td colspan="2"><span>{{tableData[13].fieldValue}}</span></td>
                <td colspan="1"><span>{{tableData[14].cnName}}：</span></td>
                <td colspan="2"><span>{{tableData[14].fieldValue}}</span></td>

                <td colspan="1"><span>{{tableData[15].cnName}}：</span></td>
                <td colspan="2"><span>{{tableData[15].fieldValue}}</span></td>
            </tr>

            <tr>
                <td colspan="1"><span>{{tableData[16].cnName}}：</span></td>
                <td colspan="2"><span>{{tableData[16].fieldValue}}</span></td>

                <td colspan="1"><span>{{tableData[17].cnName}}：</span></td>
                <td  colspan="2"><span>{{tableData[17].fieldValue}}</span></td>

                <td colspan="1"><span>{{tableData[18].cnName}}：</span></td>
                <td colspan="2"><span>{{tableData[18].fieldValue}}</span></td>
            </tr>

            <tr>
                <td colspan="1"><span>{{tableData[19].cnName}}：</span></td>
                <td colspan="8"><span>{{tableData[19].fieldValue}}</span></td>
            </tr>

            <!--借款人资质信息-->
            <tr>
                <td colspan="9" align="center" class="table-title">借款人资质信息</td>
            </tr>

            <tr>
                <td width="150" colspan="1"><span>{{tableData[20].cnName}}：</span></td>
                <td width="150" colspan="1"><span>{{tableData[20].fieldValue}}</span></td>
                <td width="150" colspan="1"><span>{{tableData[21].cnName}}：</span></td>
                <td width="150" colspan="1"><span>{{tableData[21].fieldValue}}</span></td>
                <td width="150" colspan="1"><span>{{tableData[22].cnName}}：</span></td>
                <td width="150" colspan="1"><span>{{tableData[22].fieldValue}}</span></td>
                <td width="150" colspan="1"><span>{{tableData[23].cnName}}：</span></td>
                <td width="150" colspan="2"><span>{{tableData[23].fieldValue}}</span></td>
            </tr>

            <tr>
                <td colspan="1"><span>{{tableData[24].cnName}}：</span></td>
                <td colspan="1"><span>{{tableData[24].fieldValue}}</span></td>
                <td colspan="1"><span>{{tableData[25].cnName}}：</span></td>
                <td colspan="1"><span>{{tableData[25].fieldValue}}</span></td>
                <td colspan="1"><span>{{tableData[26].cnName}}：</span></td>
                <td colspan="1"><span>{{tableData[26].fieldValue}}</span></td>
                <td colspan="1"><span>{{tableData[27].cnName}}：</span></td>
                <td colspan="2"><span>{{tableData[27].fieldValue}}</span></td>
            </tr>

            <tr>
                <td colspan="1"><span>{{tableData[28].cnName}}：</span></td>
                <td colspan="3"><span>{{tableData[28].fieldValue}}</span></td>
                <td colspan="1"><span>{{tableData[29].cnName}}：</span></td>
                <td colspan="4"><span>{{tableData[29].fieldValue}}</span></td>
            </tr>

            <tr>
                <td colspan="1"><span>{{tableData[30].cnName}}：</span></td>
                <td colspan="3"><span>{{tableData[30].fieldValue}}</span></td>
                <td colspan="1"><span>{{tableData[31].cnName}}：</span></td>
                <td colspan="4"><span>{{tableData[31].fieldValue}}</span></td>
            </tr>

            <tr>
                <td colspan="1"><span>{{tableData[32].cnName}}：</span></td>
                <td colspan="8"><span>{{tableData[32].fieldValue}}</span></td>
            </tr>
        </table>

        <!--银行卡信息-->
        <table class="borrower-details">
            <tr>
                <td colspan="9" align="center" class="table-title">银行卡信息</td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>{{tableData[33].cnName}}：</span></td>
                <td width="400" colspan="3"><span>{{tableData[33].fieldValue}}</span></td>
                <td width="180" colspan="2"><span>{{tableData[34].cnName}}：</span></td>
                <td width="400" colspan="3"><span>{{tableData[34].fieldValue}}</span></td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>{{tableData[35].cnName}}：</span></td>
                <td width="400" colspan="3"><span>{{tableData[35].fieldValue}}</span></td>
                <td width="180" colspan="2"><span>{{tableData[36].cnName}}：</span></td>
                <td width="400" colspan="3"><span>{{tableData[36].fieldValue}}</span></td>
            </tr>
        </table>

        <!--借款人资质材料-->
        <table class="borrower-details">
            <tr>
                <td colspan="9" align="center" class="table-title">借款人资质材料</td>
            </tr>

            <tr>
                <td>
                    <ul class="borrowing-ul">
                        <li v-if="ApplyInformation.length === 0" style="width: 100%;color: red;">暂无借款人资质材料</li>
                        <li v-else v-for="(item, index) in ApplyInformation" style="width: 10%;margin-bottom: 10px;cursor: pointer;float: left;" @click="openApplyInformation(index)">
                            <span style="color: #20a0ff;">{{item.name}}</span>
                        </li>
                    </ul>
                </td>
            </tr>

        </table>

        <!--面签批复-->
        <table class="borrower-details" v-if="interviewShow">
            <tr>
                <td colspan="9" align="center" class="table-title">面签批复</td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>批复时间：</span></td>
                <td width="400" colspan="3"><span>{{tableDataTwo.signTime}}</span></td>
                <td width="180" colspan="2"><span>批复人员：</span></td>
                <td width="400" colspan="3"><span>{{tableDataTwo.signUser}}</span></td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>批复额度：</span></td>
                <td width="400" colspan="3"><span>{{tableDataTwo.signAmount}}元</span></td>
                <td width="180" colspan="2"><span>批复期限：</span></td>
                <td width="400" colspan="3"><span>{{tableDataTwo.signLoanTime}}</span></td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>综合利率：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.signInterestRate}}%</span></td>
                <td width="180" colspan="1"><span>服务费：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.signFee}}元</span></td>
                <td width="180" colspan="1"><span>还款方式：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.signRepayType}}</span></td>
            </tr>

            <tr>
                <td width="180" colspan="1"><span>面签说明：</span></td>
                <td width="400" colspan="8"><span>{{tableDataTwo.signRemark}}</span></td>
            </tr>
        </table>

        <!--风控初审批复-->
        <table class="borrower-details" v-if="LoanRiskShow">
            <tr>
                <td colspan="9" align="center" class="table-title">风控初审批复</td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>批复时间：</span></td>
                <td width="400" colspan="3"><span>{{tableDataTwo.riskTime}}</span></td>
                <td width="180" colspan="2"><span>批复人员：</span></td>
                <td width="400" colspan="3"><span>{{tableDataTwo.riskUser}}</span></td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>批复额度：</span></td>
                <td width="400" colspan="3"><span>{{tableDataTwo.riskAmount}}元</span></td>
                <td width="180" colspan="2"><span>批复期限：</span></td>
                <td width="400" colspan="3"><span>{{tableDataTwo.riskLoanTime}}{{tableDataTwo.riskLoanUnit === 0? "年":tableDataTwo.riskLoanUnit === 1?"月":"日"}}</span></td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>综合利率：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.riskInterestRate}}%</span></td>
                <td width="180" colspan="1"><span>服务费：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.riskFee}}元</span></td>
                <td width="180" colspan="1"><span>还款方式：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.riskRepayType}}</span></td>
            </tr>

            <tr>
                <td width="180" colspan="1"><span>批复说明：</span></td>
                <td width="400" colspan="8"><span>{{tableDataTwo.riskRemark}}</span></td>
            </tr>
        </table>

        <!--风控初审确认-->
        <table class="borrower-details" v-if="LoanRiskShow">
            <tr>
                <td colspan="9" align="center" class="table-title">风控初审确认</td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>风控初审状态：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.riskStatus===0? "待批复":tableDataTwo.riskStatus===1?"已批复":tableDataTwo.riskStatus===2?"已确认":"不通过"}}</span></td>
                <td width="220" colspan="1"><span>确认时间：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.riskConfirmTime}}</span></td>
                <td width="180" colspan="1"><span>确认人员：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.riskConfirmUser}}</span></td>
            </tr>

            <tr>
                <td width="180" colspan="1"><span>确认说明：</span></td>
                <td width="400" colspan="8"><span>{{tableDataTwo.riskConfirmRemark}}</span></td>
            </tr>
        </table>

        <!--合同签署-->
        <table class="borrower-details" v-if="agreementShow">
            <tr>
                <td colspan="9" align="center" class="table-title">合同签署</td>
            </tr>

            <tr>
                <td  colspan="9">
                    <ul class="borrowing-ul">
                        <li v-if="agreementInformation.length === 0" style="width: 100%;color: red;">暂无合同签署材料</li>
                        <li v-else v-for="(item, index) in tableDataTwo.protocols" style="width: 10%;margin-bottom: 10px;cursor: pointer;float: left;" @click="openagreementDialog(index)">
                            <span style="color: #20a0ff;">{{item.protocolName}}</span>
                        </li>
                    </ul>
                </td>
            </tr>

            <tr>
                <td width="180" colspan="1"><span>签署人员：</span></td>
                <td width="400" colspan="8"><span>{{tableDataTwo.protocolUser}}</span></td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>协议审核时间：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.protocolTime}}</span></td>
                <td width="180" colspan="1"><span>审核人员：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.protocolUser}}</span></td>
                <td width="180" colspan="1"><span>审核结果：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.protocolStatus ===0? "未签署":"已签署"}}</span></td>
            </tr>
        </table>

        <!--家访-->
        <table class="borrower-details" v-if="visitShow">
            <tr>
                <td colspan="9" align="center" class="table-title">家访</td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>家访状态：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.visitStatus}}</span></td>
                <td width="220" colspan="1"><span>家访时间：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.visitTime}}</span></td>
                <td width="180" colspan="1"><span>家访人员：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.visitUser}}</span></td>
            </tr>

            <tr>
                <td width="180" colspan="1"><span>家访说明：</span></td>
                <td width="400" colspan="8"><span>{{tableDataTwo.visitRemark}}</span></td>
            </tr>
        </table>

        <!--家访确认-->
        <table class="borrower-details" v-if="visitShow">
            <tr>
                <td colspan="9" align="center" class="table-title">家访确认</td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>家访确认时间：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.visitConfirmTime}}</span></td>
                <td width="180" colspan="1"><span>家访确认人员：</span></td>
                <td width="400" colspan="5"><span>{{tableDataTwo.visitConfirmUser}}</span></td>
            </tr>

            <tr>
                <td width="180" colspan="1"><span>家访说明：</span></td>
                <td width="400" colspan="8"><span>{{tableDataTwo.visitConfirmRemark}}</span></td>
            </tr>
        </table>

        <!--财务核算-->
        <table class="borrower-details" v-if="financialAuditShow">
            <tr>
                <td colspan="9" align="center" class="table-title">财务核算</td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>核算时间：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.auditTime}}</span></td>
                <td width="180" colspan="1"><span>核算人员：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.auditor}}</span></td>
                <td width="180" colspan="1"><span>核算费用：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.feeAmount}}</span></td>
            </tr>
        </table>

        <!--风控复审确认-->
        <table class="borrower-details" v-if="riskAuditShow">
            <tr>
                <td colspan="9" align="center" class="table-title">风控复审确认</td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>复审确认时间：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.rmTime}}</span></td>
                <td width="180" colspan="1"><span>复审确认人员：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.rmUser}}</span></td>
                <td width="180" colspan="1"><span>风控复审确认：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.rmStatus}}</span></td>
            </tr>

            <tr>
                <td width="180" colspan="1"><span>复审批复说明：</span></td>
                <td width="400" colspan="8"><span>{{tableDataTwo.rmRemark}}</span></td>
            </tr>
        </table>

        <!--资产确认-->
        <table class="borrower-details" v-if="assetCheckShow">
            <tr>
                <td colspan="9" align="center" class="table-title">资产确认</td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>确认时间：</span></td>
                <td width="400" colspan="2"><span>{{tableDataTwo.assetConfirmTime}}</span></td>
                <td width="180" colspan="1"><span>确认人员：</span></td>
                <td width="400" colspan="5"><span>{{tableDataTwo.assetUser}}</span></td>
            </tr>
        </table>

        <!--借款需求信息-->
        <table class="borrower-details" v-if="needInfo">
            <!--借款需求信息-->
            <tr>
                <td colspan="9" align="center" class="table-title">借款需求信息</td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>借款编号：</span></td>
                <td width="400" colspan="2"><span> </span></td>
                <td width="180" colspan="1"><span>借款本金：</span></td>
                <td width="400" colspan="2"><span> </span></td>
                <td width="180" colspan="1"><span>借款期限：</span></td>
                <td width="400" colspan="2"><span> </span></td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>还款方式：</span></td>
                <td width="400" colspan="2"><span> </span></td>
                <td width="180" colspan="1"><span>借款利率：</span></td>
                <td width="400" colspan="2"><span> </span></td>
                <td width="180" colspan="1"><span>综合服务费：</span></td>
                <td width="400" colspan="2"><span> </span></td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>应还利息：</span></td>
                <td width="400" colspan="2"><span> </span></td>
                <td width="180" colspan="1"><span>手续费：</span></td>
                <td width="400" colspan="2"><span> </span></td>
                <td width="180" colspan="1"><span>状态：</span></td>
                <td width="400" colspan="2"><span> </span></td>
            </tr>

            <!--理财计划-->
            <tr>
                <td colspan="9" align="center" class="table-title">理财计划</td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>理财计划：</span></td>
                <td width="400" colspan="3"><span>U钱赚-001</span></td>
                <td width="180" colspan="2"><span>理财总额：</span></td>
                <td width="400" colspan="3"><span>￥1,000.000.00</span></td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>理财利率：</span></td>
                <td width="400" colspan="3"><span>12%</span></td>
                <td width="180" colspan="2"><span>匹配金额：</span></td>
                <td width="400" colspan="3"><span>￥250.00.00</span></td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>理财期限：</span></td>
                <td width="400" colspan="3"><span>6个月</span></td>
                <td width="180" colspan="2"><span>发布时间：</span></td>
                <td width="400" colspan="3"><span>2017/1/1 14:14:14</span></td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>还款方式：</span></td>
                <td width="400" colspan="3"><span>先息后本</span></td>
                <td width="180" colspan="2"><span>满标时间：</span></td>
                <td width="400" colspan="3"><span>2017/1/2 14:14:14</span></td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>借款协议：</span></td>
                <td width="400" colspan="8"><span>借款协议.jpg</span></td>
            </tr>

            <!--出款管理-->
            <tr>
                <td colspan="9" align="center" class="table-title">出款管理</td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>出款状态：</span></td>
                <td width="400" colspan="2"><span>已出</span></td>
                <td width="180" colspan="1"><span>出款时间：</span></td>
                <td width="400" colspan="2"><span>2017/1/2 14:14:14</span></td>
                <td width="180" colspan="1"><span>出款方式：</span></td>
                <td width="400" colspan="2"><span>提现</span></td>
            </tr>

            <tr>
                <td width="220" colspan="1"><span>实际出款：</span></td>
                <td width="400" colspan="3"><span>￥25,000.00</span></td>
                <td width="180" colspan="2"><span>手续费：</span></td>
                <td width="400" colspan="3"><span>250 （<i @click="listFeeAmount">查看详情</i>）</span></td>
            </tr>

            <!--出款管理-->
            <tr>
                <td colspan="9" align="center" class="table-title">出款管理</td>
            </tr>

            <tr>
                <td colspan="9">

                    <el-table border style="width: 1200px">
                        <el-table-column label="还款时间"></el-table-column>
                        <el-table-column label="还款期数"></el-table-column>
                        <el-table-column label="应还本金"></el-table-column>
                        <el-table-column label="应还利息"></el-table-column>
                        <el-table-column label="实际还款"></el-table-column>
                        <el-table-column label="逾期天数"></el-table-column>
                        <el-table-column label="逾期费用"></el-table-column>
                        <el-table-column label="催收费"></el-table-column>
                        <el-table-column label="操作"></el-table-column>
                    </el-table>

                </td>
            </tr>
        </table>

        <!--费用核算表-->
        <el-dialog title="费用核算表" :visible.sync="costAccountingDialog" class="costAccountingDialog">
            <div class="costAccountingBox">
                <div class="costTableItme">
                    <table class="cost-table">
                        <tr>
                            <th width="60">序号</th>
                            <th>收费项目</th>
                            <th width="150">收费标准</th>
                            <th width="150">实收金额</th>
                            <th width="150">备注</th>
                        </tr>
                        <tr v-for="(item, index) in LoanFeeDetails.listLoanFee">
                            <td>{{index + 1}}</td>
                            <td>{{item.feeName}}</td>
                            <td><span>{{item.feeAmount}}</span></td>
                            <td>{{item.fee}}</td>
                            <td>{{item.remark}}</td>
                        </tr>
                        <tr>
                            <td colspan="3">合计应收</td>
                            <td>{{LoanFeeDetails.costAccountingSum}}</td>
                            <td>/</td>
                        </tr>
                    </table>
                </div>
            </div>
        </el-dialog>

        <!--借款人资质材料-->
        <el-dialog :visible.sync="ApplyInformationDialog" class="ApplyInformationDialog">
            <el-carousel :autoplay="false" arrow="always" height="200px" indicator-position="outside" trigger="click" ref="ApplyInformation" :initial-index="0">
                <el-carousel-item v-for="(item, index) in ApplyInformation" :key="index" :name="toString(index)">
                    <p style="margin: 0 0 10px 0;font-size: 16px;"><strong>{{item.name}}</strong></p>
                    <img class="p-file" :src="item.url" alt="照片异常" @click="openBigPhoto(item.url)">
                </el-carousel-item>
            </el-carousel>
        </el-dialog>

        <!--合同签署-->
        <el-dialog :visible.sync="agreementDialog" class="ApplyInformationDialog">
            <el-carousel :autoplay="false" arrow="always" height="200px" indicator-position="outside" trigger="click" ref="agreementInfo" :initial-index="0">
                <el-carousel-item v-for="(item, index) in tableDataTwo.protocols" :key="index" :name="toString(index)">
                    <p style="margin: 0 0 10px 0;font-size: 16px;"><strong>{{item.protocolName}}</strong></p>
                    <img class="p-file" :src="item.protocolContent" alt="照片异常" @click="openBigPhoto(item.protocolContent)">
                </el-carousel-item>
            </el-carousel>
        </el-dialog>

        <!--大图片预览-->
        <el-dialog v-model="dialogBigPhoto" class="dialogBigPhoto" size="full">
            <img :src="BigPhotoUrl" alt="" id="rotateIMG">
        </el-dialog>

    </div>
</template>

<script>
    import { getLoanInfo, getLoanCheckInfo, listRepayInfo, listLoanFee } from "@/api/api";
    export default {
        name: "borrowerDetails",
        data () {
            return {
                tableData: [
                    {
                        "cnName": "1",
                        "fieldNo": "1",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "2",
                        "fieldNo": "2",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "3",
                        "fieldNo": "3",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "4",
                        "fieldNo": "4",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "5",
                        "fieldNo": "5",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "6",
                        "fieldNo": "6",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "7",
                        "fieldNo": "7",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "8",
                        "fieldNo": "8",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "9",
                        "fieldNo": "9",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "10",
                        "fieldNo": "10",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "11",
                        "fieldNo": "11",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "12",
                        "fieldNo": "12",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "13",
                        "fieldNo": "13",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "14",
                        "fieldNo": "14",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "15",
                        "fieldNo": "15",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "16",
                        "fieldNo": "16",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "17",
                        "fieldNo": "17",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "18",
                        "fieldNo": "18",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "19",
                        "fieldNo": "19",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "20",
                        "fieldNo": "20",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "21",
                        "fieldNo": "21",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "22",
                        "fieldNo": "22",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "23",
                        "fieldNo": "23",
                        "fieldValue": ""
                    },{
                        "cnName": "24",
                        "fieldNo": "24",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "25",
                        "fieldNo": "25",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "26",
                        "fieldNo": "26",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "27",
                        "fieldNo": "27",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "28",
                        "fieldNo": "28",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "29",
                        "fieldNo": "29",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "30",
                        "fieldNo": "30",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "31",
                        "fieldNo": "31",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "32",
                        "fieldNo": "32",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "33",
                        "fieldNo": "33",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "34",
                        "fieldNo": "34",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "35",
                        "fieldNo": "35",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "36",
                        "fieldNo": "36",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "37",
                        "fieldNo": "37",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "38",
                        "fieldNo": "38",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "",
                        "fieldNo": "39",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "",
                        "fieldNo": "40",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "",
                        "fieldNo": "41",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "",
                        "fieldNo": "45",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "",
                        "fieldNo": "46",
                        "fieldValue": ""
                    },
                    {
                        "cnName": "",
                        "fieldNo": "47",
                        "fieldValue": ""
                    }
                ],
                tableDataTwo: "",
                // 面签批复
                interviewShow: true,
                // 风控初审批复
                LoanRiskShow: true,
                // 合同签署
                agreementShow: true,
                // 家访确认
                visitShow: true,
                // 财务审核
                financialAuditShow: true,
                // 风控复审
                riskAuditShow: true,
                // 资产确认
                assetCheckShow: true,
                // 借款需求信息
                needInfo: false,
                // 借款人资质材料弹窗
                ApplyInformationDialog: false,
                ApplyInformation: [],
                // 合同签署弹窗
                agreementDialog: false,
                agreementInformation: [],
                // 费用核算表弹出框显示或隐藏；
                costAccountingDialog: false,
                // 打开费用明细表
                LoanFee: {
                    productNo: "",
                    loanNo: ""
                },
                // 费用明细列表
                LoanFeeDetails: {
                    costAccountingSum: "",
                    listLoanFee: []
                },
                // 大图片预览
                dialogBigPhoto: false,
                BigPhotoUrl: ''
            };
        },
        methods: {
            // 借款详情1
            async loadData () {
                let _this = this;
                await getLoanInfo({
                    "loanNo": this.$route.query.loanNo
                }).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    console.log("借款详情1", Data);
                    _this.tableData = Data.info;
                    _this.ApplyInformation = Data.data;
                });
            },
            // 借款审核信息
            async loadDataTwo () {
                let _this = this;
                await getLoanCheckInfo({
                    "loanNo": this.$route.query.loanNo
                }).then((res) => {
                    if (res !== undefined) {
                        let Data = JSON.parse(res.data.ciphertext);
                        this.agreementInformation = Data.protocols;
                        console.log("借款详情2", Data);
                        console.log("this.agreementInformation", this.agreementInformation);
                        if(Data){
                            let Status = Data.checkStatus;
                            switch (Status) {
                            //  申请
                            case 0:
                                _this.interviewShow = false;
                                _this.LoanRiskShow = false;
                                _this.agreementShow = false;
                                _this.visitShow = false;
                                _this.financialAuditShow = false;
                                _this.riskAuditShow = false;
                                _this.assetCheckShow = false;
                                break;
                            // 面签
                            case 1:
                                _this.interviewShow = true;
                                _this.LoanRiskShow = false;
                                _this.agreementShow = false;
                                _this.visitShow = false;
                                _this.financialAuditShow = false;
                                _this.riskAuditShow = false;
                                _this.assetCheckShow = false;
                                break;
                            // 风控初审
                            case 2:
                                _this.interviewShow = true;
                                _this.LoanRiskShow = true;
                                _this.agreementShow = false;
                                _this.visitShow = false;
                                _this.financialAuditShow = false;
                                _this.riskAuditShow = false;
                                _this.assetCheckShow = false;
                                break;
                            // 合同签署
                            case 3:
                                _this.interviewShow = true;
                                _this.LoanRiskShow = true;
                                _this.agreementShow = true;
                                _this.visitShow = false;
                                _this.financialAuditShow = false;
                                _this.riskAuditShow = false;
                                _this.assetCheckShow = false;
                                break;
                            // 家访
                            case 4:
                                _this.interviewShow = true;
                                _this.LoanRiskShow = true;
                                _this.agreementShow = true;
                                _this.visitShow = true;
                                _this.financialAuditShow = false;
                                _this.riskAuditShow = false;
                                _this.assetCheckShow = false;
                                break;
                            // 财务
                            case 5:
                                _this.interviewShow = true;
                                _this.LoanRiskShow = true;
                                _this.agreementShow = true;
                                _this.visitShow = true;
                                _this.financialAuditShow = true;
                                _this.riskAuditShow = false;
                                _this.assetCheckShow = false;
                                break;
                            // 风控复审
                            case 6:
                                _this.interviewShow = true;
                                _this.LoanRiskShow = true;
                                _this.agreementShow = true;
                                _this.visitShow = true;
                                _this.financialAuditShow = true;
                                _this.riskAuditShow = true;
                                _this.assetCheckShow = false;
                                break;
                            // 资产确认
                            case 7:
                                _this.interviewShow = true;
                                _this.LoanRiskShow = true;
                                _this.agreementShow = true;
                                _this.visitShow = true;
                                _this.financialAuditShow = true;
                                _this.riskAuditShow = true;
                                _this.assetCheckShow = true;
                                break;
                            // 资产确认
                            case 8:
                                _this.interviewShow = true;
                                _this.LoanRiskShow = true;
                                _this.agreementShow = true;
                                _this.visitShow = true;
                                _this.financialAuditShow = true;
                                _this.riskAuditShow = true;
                                _this.assetCheckShow = true;
                                break;
                            };
                            let dataUnit = ["年", "月", "日"];
                            let visitStatusArr = ["未家访", "家访不通过", "已通过", "确认不通过", "已确认"];
                            let rmStatusArr = ["未确认", "不通过", "通过"];
                            let signStatusArr = ["申请中", "面签","风控初审", "合同签署", "家访", "财务核算", "风控复审", "资产确认", "已完成"];
                            let signRepayTypeArr = ["到期还款", "先息后本", "等额本息", "等额本金"];

                            Data.visitStatus = visitStatusArr[Data.visitStatus];
                            if (Data.signLoanTime) {
                                Data.signLoanTime = Data.signLoanTime+dataUnit[Data.signLoanUnit];
                            }
                            Data.rmStatus = rmStatusArr[Data.rmStatus];
                            Data.checkStatus = signStatusArr[Data.checkStatus];
                            Data.signRepayType = signRepayTypeArr[Data.signRepayType];
                            Data.riskRepayType = signRepayTypeArr[Data.riskRepayType];
                            if(Data.signTime){
                                Data.signTime = _this.formatTime(Data.signTime);
                            }
                            if(Data.riskTime){
                                Data.riskTime = _this.formatTime(Data.riskTime);
                            }
                            if(Data.visitTime){
                                Data.visitTime = _this.formatTime(Data.visitTime);
                            }
                            if(Data.visitConfirmTime){
                                Data.visitConfirmTime = _this.formatTime(Data.visitConfirmTime);
                            }
                            if(Data.riskConfirmTime){
                                Data.riskConfirmTime = _this.formatTime(Data.riskConfirmTime);
                            }
                            if(Data.auditTime){
                                Data.auditTime = _this.formatTime(Data.auditTime);
                            }
                            if(Data.rmTime){
                                Data.rmTime = _this.formatTime(Data.rmTime);
                            }
                            if(Data.protocolTime){
                                Data.protocolTime = _this.formatTime(Data.protocolTime);
                            }
                            if(Data.assetConfirmTime){
                                Data.assetConfirmTime = _this.formatTime(Data.assetConfirmTime);
                            }
                        }
                        _this.tableDataTwo = Data;
                        _this.LoanFee.productNo = _this.tableDataTwo.productNo;
                        _this.LoanFee.loanNo = _this.tableDataTwo.loanNo;
                    }
                });
            },
            // 借款人资质材料：
            openApplyInformation (index) {
                this.ApplyInformationDialog = true;
                this.$refs.ApplyInformation.setActiveItem(index);
            },
            // 合同签署：
            openagreementDialog (index) {
                this.agreementDialog = true;
                this.$refs.agreementInfo.setActiveItem(index);
            },
            // 还款管理列表
            async getListRepayInfo () {
                let _this = this;
                await listRepayInfo({
                    "loanNo": this.$route.query.loanNo,
                    "userNo": this.$route.query.userNo,
                    "pageNum": 1,
                    "pageSize": 10
                }).then((res) => {
                });
            },
            // 手续费明细
            async listFeeAmount () {
                let _this = this;
                _this.costAccountingDialog = true;
                this.LoanFeeDetails.costAccountingSum = "";
                await listLoanFee(this.LoanFee).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    _this.LoanFeeDetails.listLoanFee = Data;
                    for (let value of Data) {
                        if (value.fee) {
                            _this.LoanFeeDetails.costAccountingSum = Number(_this.LoanFeeDetails.costAccountingSum) + Number(value.fee);
                        }
                    }
                });
            },
            // 大图片预览
            openBigPhoto (item) {
                this.dialogBigPhoto = true;
                this.BigPhotoUrl = item;
            }
        },
        watch: {
            $route: function (to) {
                if(to.name === "borrowerDetails"){
                    this.loadData();
                    this.loadDataTwo();
                }
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                this.loadData();
                this.loadDataTwo();
            });
        }
    };
</script>

<style lang="scss">
    #borrowerDetails{
        font-size:14px;
        h3{
            text-align: center;
            margin: 30px 0;
        }
        .borrower-details{
            border-collapse:collapse;
            width: 1200px;
            margin: 0 auto 80px;
            padding: 0px!important;
            border: 1px solid #ccc;
            td{
                border: 1px solid #ccc;
                margin: 0;
                height: 45px;
                span{
                    padding: 0 15px;
                    display: block;
                }
                i{
                    color: #ff0000;
                    font-style: normal;
                    text-decoration: underline;
                }
                input{
                    border: none;
                    width: 100%;
                    outline:none
                }
                a{
                    color: #ff0000;
                }
                .applyTable-min-table{
                    border: none!important;
                    border-collapse:collapse;
                    td{
                        border-top: none!important;
                        border-bottom: none!important;
                        border-left: none!important;
                        border-right: 1px solid #ccc;
                    }
                    td:last-of-type{
                        border-right: none!important;
                    }
                }
            }
            .table-title{
                background: #f2f2f2;
            }
            .borrowing-ul{
                height: auto;
                overflow: hidden;
                li{
                    width: 25%;
                    cursor: pointer;
                    float: left;
                    line-height: 48px;
                    text-align: center;
                    span{
                        padding: 0 15px;
                        overflow:hidden;
                        white-space: nowrap;
                        text-overflow:ellipsis;
                    }
                }
            }
        }
        .costAccountingTable{
            width: 800px;
            position: fixed;
            top: 20%;
            left: 50%;
            margin-left: -400px;
            background: #fff;
        }
        .costAccountingBox{
            margin: 0 auto;
            border-top: 1px solid #eee;
            h3{
                padding: 10px 0;
                text-align: center;
                border-bottom: 1px solid #eee;
            }
            .costTableInpu{
                text-align: center;
                padding: 20px 0;
            }
            .costTableItme{
                padding: 0 30px;
                .cost-table{
                    border-spacing:0;
                    width: 100%;
                    text-align: center;
                    tr{
                        th{
                            padding: 10px 0;
                            background: #f2f2f2;
                            border: 1px solid #eee;
                        }
                        td{
                            border: 1px solid #eee;
                            padding: 10px 0;
                            input{
                                border: none;
                                outline: none;
                            }
                        }
                    }
                }
            }
            .costAccountingBotton{
                margin: 20px 0;
                text-align: center;
                button{
                    width: 180px;
                    margin: 0 30px;
                }
            }
        }
        .ApplyInformationDialog{
            img{
                max-width: 100%;
                max-height: 100%;
                display: block;
                margin: 0 auto;
                text-align: center;
            }
        }
      .dialogBigPhoto{
            img{
                max-width: 100%;
                max-height: 100%;
                display: block;
                margin: 0 auto;
                text-align: center;
            }
      }
    }
</style>
